<template>
  <div class="edit-container">
    <el-form v-loading="formLoading" ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="图标：" prop="icon">
        <el-tooltip
            class="item"
            effect="dark"
            content="上传图标"
            placement="top-start">
          <el-upload
              class="upload-demo"
              action
              accept="image/gif,image/jpeg,image/png"
              :before-upload="beforeAvatarUpload"
              :http-request="handleUploadForm8"
              :show-file-list="false">
            <img v-if="form.icon" :src="form.icon" class="avatar" style="width:150px;height:150px;">
            <el-button
                v-else
                icon="el-icon-plus"
                class="mr50 definedArea"
                style="width:150px;height:150px;"
            ></el-button>
          </el-upload>
        </el-tooltip>
      </el-form-item>
      <el-form-item label="权益名称：" prop="privilegeName">
        <el-input placeholder="权益名称" v-model="form.privilegeName" class="col" maxlength="10"/>
      </el-form-item>
      <el-form-item label="权益内容：" prop="privilegeValue">
        <el-input placeholder="权益内容" v-model="form.privilegeValue" class="col" maxlength="15"/>
      </el-form-item>
      <el-form-item>
        <el-button v-loading="saveLoading" element-loading-background="rgba(0, 0, 0, 0.3)" type="primary"
                   @click="handlerSubmit" v-has-permi="['admin:member:rights:save']">保存
        </el-button>
        <el-button @click="close">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {rightsDetail, saveRights, uploadRightsIcon} from "@/api/member";
import {getForm} from "@/utils/utils";

export default {
  components: {},
  props: {
    id: {
      default: null
    }
  },
  data() {
    return {
      form: {
        id: null,
        privilegeName: '',
        privilegeValue: '',
        icon: '',
      },
      rules: {
        icon: [{required: true, message: '请上传图标', trigger: ['blur']}],
        privilegeName: [{required: true, message: '请填写权益名称', trigger: ['blur']}],
        privilegeValue: [{required: true, message: '请填写权益内容', trigger: ['blur']}],
      },
      roles: [],
      saveLoading: false,
      formLoading: false,
      uploads: {
        show: false,
        multiple: true,
      },
      iconUrl: ''
    }
  },
  mounted() {
    this.iconUrl = process.env.VUE_APP_ICON_URL
    if (this.id) {
      this.getDetail();
    }
  },
  methods: {
    getDetail() {
      this.formLoading = true
      rightsDetail(this.id).then(res => {
        getForm(res, this.form);
      }).finally(() => {
        this.formLoading = false;
      })
    },
    handlerSubmit() {
      if (this.saveLoading || this.formLoading) {
        return;
      }
      this.$refs.form.validate(valid => {
        if (!valid) return;
        this.saveLoading = true;
        saveRights(this.form).then(() => {
          this.$message.success('保存成功');
          this.close();
        }).finally(() => {
          this.saveLoading = false
        })
      })
    },
    handleUploadForm8(param) {
      const formData = new FormData();
      formData.append("file", param.file);
      let loading = this.$loading({
        lock: true,
        text: "上传中，请稍候...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      uploadRightsIcon(formData).then((res) => {
        this.form.icon = this.iconUrl + res.url
        //图片上传接口 后期调用
        loading.close();
        this.$message.success("上传成功");
      }).catch(() => {
        loading.close();
      });
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || 'image/png';
      const isLt5M = file.size / 1024 / 1024 < 5;
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG、PNG 格式!');
      }
      if (!isLt5M) {
        this.$message.error('上传图片大小不能超过 5MB!');
      }
      return isJPG && isLt5M;
    },
    close() {
      this.$emit('hideEditDialog')
    }
  }
}
</script>
